<template>
  <div class="home-head">
    <!-- 移动端点击不会放大 -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no"
    />
    <home-head />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 首页轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 首页轮播 -->
      <!-- 宫格导航 -->
      <van-grid column-num="3" clickable>
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :to="{
            path: './itemList',
            query: {
              cateId: cate.id,
            },
          }"
          :text="cate.name"
        />
      </van-grid>
      <!-- 宫格导航 -->

      <!-- 上拉加载 -->
      <van-list
        class="container"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="50"
        @load="onLoad"
      >
        <!-- 精品推荐 -->
        <list-items
          @clickItem="enterDetail"
          @clickAddIcon="addCart"
          :items="items"
        />
        <!-- 精品推荐 -->
      </van-list>
      <!-- 上拉加载 -->
    </van-pull-refresh>
    <!-- 下拉刷新 -->
    <my-tabbar />
  </div>
</template>

<script>
import { fetchHomeBanner, fetchCates, fetchListItems, addCart } from "_api";
import MyTabbar from "../../components/MyTabbar";
import HomeHead from "./commponents/HomeHead.vue";
import ListItems from "./commponents/ListItems.vue";
import { getToken } from "_utils";
import {Toast} from 'vant'
export default {
  name: "Home",
  components: {
    MyTabbar,
    HomeHead,
    ListItems,
  },
  data() {
    return {
      // 首页轮播图数据
      banners: [],
      // 宫格导航数据
      cates: [],
      // 首页推荐商品数据
      items: [],
      // 下拉刷新   是否处理下拉加载状态
      isLoading: false,
      //当前页
      page: 1,
      // 一页多少条
      pageSize: 5,
      // 代表是否上拉触底(上拉触底时会自动变成true)
      // 变成true时会自动触发load事件
      loading: false,
      //代表是否到达最后一页，变成true不会再触发load事件
      finished: false,
    };
  },
  created() {
    this.fetchCates();
    this.fetchbanner();
    // this.fetchListItems()
  },
  methods: {
    addCart({ id }) {
      // 加入购物车
      addCart({
        goodsId: id,
        number: 1,
        token: getToken(),
      }).then((res) => {
        if(res.data.code===0){
          Toast.success('加入购物车成功')
          this.$store.commit('cart/set_cart_info',{
            items:res.data.data.items,
            number:res.data.data.number
          })
        }
      });
    },
    enterDetail(id) {
      // 跳转到详情页
      this.$router.push(`/detail/${id}`);
    },
    onLoad() {
      // 上拉触底的时候触发
      /* 
      在内容高度 距离可视区高度小于 给定的offset时触发
      */
      // 初始化时自动调用一次，初始数据没有过来，网页内容高度没有撑开，内容和可视区的距离是负数
      this.fetchListItems();
      // 将page+1 请求下一页的数据
      this.page++;
      //  console.log('上拉了');
    },
    onRefresh() {
      // 下拉刷新回调 处理 下拉时调用 isLoading会自动变成true
      // 重新请第一页数据
      this.page = 1;
      // 将原来的数据情况(原来是合并)
      this.items = [];
      // 将到达最后一页，状态关闭(已经从第一页重新请求了)
      this.finished = false;
      this.fetchListItems();
      this.page++;
    },
    fetchListItems() {
      //请求首页推荐商品数据
      fetchListItems({
        categoryId: "72399",
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.isLoading = false;
        // 在这里将 上拉加载状态变成 false(下面的数据已经请求过来了)
        this.loading = false;
        if (res.data.code === 0) {
          // 应该将数据合并，不能直接赋值，赋值会覆盖前一页的内容
          // 上拉加载时，前面页面的数据要保留
          // this.items=res.data.data.result
          this.items = [...this.items, ...res.data.data.result];
        }
        if (res.data.code === 700) {
          this.finished = true;
        }
      });
    },
    fetchbanner() {
      // 请求首页轮播数据
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data;
        }
      });
    },
    fetchCates() {
      // 请求首页宫格导航分类数据
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}
.my-swipe {
  width: 10rem;
  height: 5rem;
  img {
    width: 100%;
    height: 100%;
  }
}
h2 {
  font-size: 18px;
  text-align: center;
  height: 20px;
}
</style>